<template>
    <div class="bac">
        <div class="top">
            <div class="title">注册</div>
            <!-- 登录表单 -->
            <van-form @submit="onSubmit">
                <van-field v-model="formData.uName" name="用户名" placeholder="请输入用户名" left-icon="/img/icon/my.png"
                    :rules="[{ required: true, message: '用户名不能为空' }]" />
                <van-field v-model="formData.uEmail" name="邮箱" placeholder="请输入邮箱" left-icon="/img/icon/email.png" :rules="[
                    { required: true, message: '邮箱不能为空！' },
                    { validator, message: '邮箱格式不正确！' },
                    { validator: asyncValidator, message: '该邮箱已存在' }]" />
                <van-field v-model="formData.uCode" name="验证码" placeholder="请输入验证码" left-icon="/img/icon/yzm.png" :rules="[
                    { required: true, message: '验证码不能为空' },
                    { validator: asyncValidatorCode, message: '验证码错误' }
                ]">
                    <template #button>
                        <van-button @click="sendCode" v-if="sendBtnMsg == '发送验证码'" class="code" size="small"
                            type="primary">{{ sendBtnMsg }}</van-button>
                        <van-button v-else class="code" size="small" type="primary">{{ sendBtnMsg }}</van-button>
                    </template>
                </van-field>
                <van-field v-model="formData.uPwd" type="password" name="密码" placeholder="密码" left-icon="/img/icon/pwd.png"
                    :rules="[{ required: true, message: '密码不能为空' }]" />
                <div style="margin: 16px;" class="btn">
                    <van-button round block type="primary" native-type="submit">注册</van-button>
                    <van-button round block type="primary" native-type="submit" @click="toLogin">登录</van-button>
                </div>
            </van-form>
        </div>
        <!-- 其他方式登录 -->
        <div class="other-login">
            <!-- 分割线 -->
            <van-divider style="margin: 1rem 0">其他登录方式</van-divider>
            <van-grid :border="false" :gutter="0">
                <van-grid-item icon="/img/icon/qq.png" />
                <van-grid-item icon="/img/icon/weibo.png" />
                <van-grid-item icon="/img/icon/chat.png" />
            </van-grid>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sendBtnMsg: '发送验证码',
            timer: null,
            formData: {
                uEmail: '',
                uName: '',
                uPwd: '',
                uCode: ''
            }
        };
    },
    methods: {
        // 发送验证码
        sendCode() {
            if (this.formData.uEmail) {
                let time = 30
                new Promise(resolve => {
                    clearInterval(this.timer)
                    this.timer = setInterval(() => {
                        if (time > 0) {
                            this.sendBtnMsg = time + 's'
                            time--
                        } else {
                            this.sendBtnMsg = '发送验证码'
                        }
                        resolve('发送验证码')
                    }, 1000)
                }).then(res => {
                    this.sendBtnMsg = res
                })
                // 发送请求，获取邮箱验证码
                this.http.post(this.$api.sendCode, {
                    email: this.formData.uEmail
                }).then(res => res.data)
                    .then(res => {
                        console.log(res);
                        if (res.code = 200) {
                            this.$msg.success(res.msg)
                        } else {
                            this.$msg.fail(res.msg)
                        }
                    })
            } else {
                this.$msg.fail('邮箱不能为空！')
            }

        },
        // 邮箱格式校验
        validator(val) {
            return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(val)
        },
        // 邮箱唯一性校验
        asyncValidator(email) {
            let that = this
            return new Promise((resolve) => {
                that.http.post(that.$api.checkUserEmail, { email }).then(res => {
                    console.log('邮箱唯一性校验返回', res);
                    if (res?.data?.code == 200) {
                        resolve(true)
                    } else {
                        resolve(false)
                    }
                })
            })
        },
        // 验证码校验
        asyncValidatorCode(code) {
            let that = this
            return new Promise((resolve) => {
                console.log(that.formData.uEmail, '**');
                that.http.post(that.$api.checkCode, { code, email: this.formData.uEmail })
                    .then(res => {
                        console.log('验证码校验返回', res);
                        if (res?.data?.code == 200) {
                            resolve(true)
                        } else {
                            resolve(false)
                        }
                    })
            })
        },
        // 注册
        onSubmit(values) {
            this.http.post(this.$api.register, this.formData)
                .then(res => res.data)
                .then(res => {
                    if (res.code == 200) {
                        this.$msg.success(res.msg);
                        this.$router.replace("/login");
                    } else {
                        this.$msg.fail(res.msg);
                    }
                });
        },
        // 跳转登录页
        toLogin() {
            this.$router.replace('/login')
        }
    },
}
</script>

<style lang="scss" scoped>
.bac {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: url('/public/img/background/reg_bg.jpg');
    background-color: #f7f7f7;
    background-size: 100vw 24rem;
    background-repeat: no-repeat;

    .top {
        margin: 13rem auto 0;
        color: orange;
        width: 90%;
        background-color: white;
        opacity: .8;
        border-radius: 1rem;

        .title {
            height: 5rem;
            font-size: 2rem;
            line-height: 40px;
            padding: 2rem;
        }

        .van-button {
            width: 80%;
            margin: 1rem auto;
        }

        .btn>.van-button:nth-child(1) {
            background-color: rgb(249, 200, 108);
            border: none;
        }

        .btn>.van-button:nth-child(2) {
            background-color: #ccc;
            border: none;
        }

        .code {
            width: 8rem;
            background-color: rgb(248, 199, 108);
            border: none;
        }

        .van-cell {
            display: flex;
            align-items: center;
        }

    }

    .other-login {
        width: 90%;
        margin: 3rem auto;

        .van-grid {
            width: 100%;
            justify-content: center;
            background-color: white;
        }
    }


}
</style>